<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">count:{{count}}</div>
    <script>
      Vue.config.productionTip = false;
      /* 
        Vue的生命周期:
          说的是Vue实例或者是组件实例从创建到销毁的过程。
          在vue的生命周期过程中经历了从初始化==>模板编译阶段==>挂载阶段==>更新阶段==>销毁阶段 5个阶段。

        - 初始化阶段：
          * new Vue():创建了一个Vue的实例对象。
          * 初始了事件和生命周期,也就是说目前的vue实例对象上只有默认的生命周期函数和一些默认的事件。
          * [[beforeCreate]]生命周期函数,在数据代理和数据劫持之前,此时是无法访问到数据和方法的。
          * 把数据和方法注入到vm实例上,并激活响应式,也就是完成了数据代理和数据劫持。
          * [[created]]生命周期函数:在数据代理和数据劫持之后,此时是第一个能够访问数据和方法的生命周期函数。

        - 模板编译阶段：
          * 判断options中是否有el选项,如果有则继续向下,如果没有则等待$mount被调用(如果等不到就会一直等下去)。
          * 判断options中是否有template配置项：
            - 如果有则编译template配置项生成渲染函数(内部都是虚拟DOM)。
            - 如果没有则把el容器的outerHTML作为模板 编译生成渲染函数。

        - 挂载阶段：
          * [[beforeMount]]:在挂载之前,页面呈现的是未经Vue编译模板DOM结构。
          * 根据模板编译阶段得到的渲染函数创建真实DOM,并替换掉el的容器(其实就是把虚拟DOM编译成真实DOM并放在页面中),这个就是挂载的过程。
          * [[mounted]]:在挂载之后,页面呈现的是已经被vue编译过的真实DOM结构,我们会经常的在mounted中进行初始化一些操作(设置定时器,发送请求,初始化订阅,绑定自定义事件)。
      */
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 0,
          };
        },
        beforeCreate() {
          console.log("beforeCreate", this);
          debugger;
        },
        created() {
          console.log("created", this);
          debugger;
        },
        beforeMount() {
          console.log("beforeMount");
          debugger;
        },
        mounted() {
          console.log("mounted");
          debugger;
        },
      });
    </script>
  </body>
</html>
